"use strict"
$(function() {
    //切图参数
    let _obj = {
        minWidth: 100, //切图窗口最小宽度
        minHeight: 100, //切图窗口最小宽度
        WHscale: 1, //宽高比例系数
        cropperWidth: 100, //剪切窗口的宽度
        cropperHeigth: 100, //剪切窗口的高度
        cropperX: 0, //剪切窗口的x坐标
        cropperY: 0, //剪切窗口的y坐标
        canvasWidth: 0, //剪切对象的宽度
        canvasHeight: 0, //剪切对象的高度
    }
    console.log("cropper");

    console.log($(window).width());

    //求比例系数
    if ($(window).width() > 700) {
        _obj.WHscale = 75 / 40
    }
    console.log(_obj);

    //添加截图面板
    $("body").append(`<div class="cropper-wrap" style="display:none">
        <div class="cropper-back"></div>
        <div class="cropper-main">
            <div class="cropper-header">图片裁剪</div>
            <div class="cropper-body">
                <div class="cropper-body-left">
                    <img src="" id="cropper-body-left">
                </div>
                <div class="cropper-body-right">
                    <div class="cropper-footer-left-rect"></div>
                    <div class="cropper-footer-left-circle"></div>
                </div>
            </div>
            <div class="cropper-footer">
                <div class="cropper-footer-left">
                    <input type="file" id="uploadfile" style="display:none"/>
                    <span id="uploadfileClick">选择文件</span>
                </div>
                <div class="cropper-footer-right"><span  id="cropper-footer-right-crop">裁剪</span></div>
            </div>
        </>
    <div>`);

    //选择文件
    $(document).on("click", "#uploadfileClick", function() {
        $("#uploadfile").click();
    });
    //选择图片后
    $("#uploadfile").change(function() {
        uploadImg($(this)[0].files[0]);
    })

    //生成选择图像base64url
    let uploadImg = (file) => {
        console.log(file);
        var reader = new FileReader();
        reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
        reader.onload = function(evt) {
            //console.log(evt.target.result)
            document.getElementById('cropper-body-left').src = evt.target.result;
            cropperbody(evt.target.result); //添加剪切样式层
        }
    }

    //添加切图样式
    let cropperbody = (url) => {
        if ($("#imgappendDiv").length > 0) {
            $("#imgappendDiv").remove(); //如果存在则删除
        }

        $("body").append(`<div id="imgappendDiv" style="position: fixed;left: 100000000px;"><img id="imgAppend" /> <canvas id="imgAppendCanvas"></canvas>
                          </div>`); //插入一个图片元素

        $(".cropper-body-wrap").remove(); //删除剪切对象
        //添加剪切对象
        $(".cropper-body-left").append(`<div class="cropper-body-wrap">
                <div class="cropper-body-back"></div>
                <div class="cropper-body-main">
                    <div class="cropper-body-main-back">
                        <img id="cropper-body-main-img"/>
                    </div>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </>
            </div>`);
        //设置img src
        let _img = document.getElementById('cropper-body-left');
        let _div = $(".cropper-body-main");
        let _divP = $(".cropper-body-wrap");
        let _divimg = $("#cropper-body-main-img");

        $("#imgAppend").attr("src", url); //将img标签的src绑定为DataURL

        setTimeout(function() {
            let _divleft = (_divP.width() - _div.width()) / 2;
            let _divtop = (_divP.height() - _div.height()) / 2;
            _div.css("left", _divleft); //设置剪切对象到左边的距离
            _div.css("top", _divtop); //设置剪切对象到顶部的距离
            //获取遮罩层到顶部的距离
            _divimg.attr("src", url); //设置src 
            _divimg.attr("width", _img.offsetWidth); //设置宽度
            _divimg.attr("height", _img.offsetHeight); //设置高度
            _divimg.css("left", _img.offsetLeft - (_div.offset().left - _divP.offset().left)); //设置到左边的距离
            _divimg.css("top", _img.offsetTop - (_div.offset().top - _divP.offset().top)); //设置到顶部的距离


            let _appendImgW = $("#imgAppend").width(); //图片宽度
            let _appendImgH = $("#imgAppend").height(); //图片高度

            console.log(_appendImgW);
            console.log(_appendImgH);
            let _WH = 6 / 4; //图片的宽高比例
            //设置canvas 剪切图的宽高
            if (_obj.WHscale > 1) { //pc端
                if (_appendImgH < 750 && _appendImgW < 750) {
                    console.log(1);
                    $("#imgAppendCanvas").attr("width", 750 * _WH); //设置canvas的宽度
                    $("#imgAppendCanvas").attr("height", 750); //设置canvas的高度
                } else {
                    if (_appendImgH < 750) { //项目需求最小宽度  高度为750px
                        if (_appendImgW / _appendImgH >= _WH) {
                            console.log(2);
                            $("#imgAppendCanvas").attr("width", _appendImgW); //设置canvas的宽度
                            $("#imgAppendCanvas").attr("height", _appendImgW / _WH); //设置canvas的高度
                        } else {
                            console.log(3);
                            $("#imgAppendCanvas").attr("width", 750 * _WH); //设置canvas的宽度
                            $("#imgAppendCanvas").attr("height", 750); //设置canvas的高度
                        }
                    } else if (_appendImgH >= 750) {
                        if (_appendImgW / _appendImgH <= _WH) {
                            console.log(4);
                            $("#imgAppendCanvas").attr("width", _appendImgH * _WH); //设置canvas的宽度
                            $("#imgAppendCanvas").attr("height", _appendImgH); //设置canvas的高度
                        } else {
                            console.log(5);
                            $("#imgAppendCanvas").attr("width", _appendImgW); //设置canvas的宽度
                            $("#imgAppendCanvas").attr("height", _appendImgW / _WH); //设置canvas的高度
                        }

                    }
                }


            } else { //移动端
                if (_appendImgH < 750 && _appendImgW < 750) { //项目需求最小宽度  高度为750px
                    $("#imgAppendCanvas").attr("width", 750); //设置canvas的宽度
                    $("#imgAppendCanvas").attr("height", 750); //设置canvas的高度
                } else {
                    if (_appendImgH > _appendImgW) {
                        $("#imgAppendCanvas").attr("width", _appendImgH); //设置canvas的宽度
                        $("#imgAppendCanvas").attr("height", _appendImgH); //设置canvas的高度
                    } else {
                        $("#imgAppendCanvas").attr("width", _appendImgW); //设置canvas的宽度
                        $("#imgAppendCanvas").attr("height", _appendImgW); //设置canvas的高度
                    }
                }
            }

            //canvas绘图
            let _Canvas = document.getElementById('imgAppendCanvas');
            let ctx = _Canvas.getContext('2d');
            let img = new Image();
            img.src = url; //将img标签的src绑定为DataURL


            //获取剪切对象的宽度、高度
            _obj.canvasHeight = parseInt($("#imgAppendCanvas").height());
            _obj.canvasWidth = parseInt($("#imgAppendCanvas").width());

            //画图
            img.onload = function() {
                ctx.drawImage(img, 0, 0, _appendImgW, _appendImgH, (parseInt($("#imgAppendCanvas").width()) - _appendImgW) / 2, (parseInt($("#imgAppendCanvas").height()) - _appendImgH) / 2, _appendImgW, _appendImgH); //生成背景
            };
        })

    }

    let _MSx, _MSy, _sx, _sy, _simgx, _simgy, _slD, _Mflog = false; //鼠标开始位置x 鼠标开始位置y 剪切开始x位置 剪切开始y位置 剪切内img开始x位置 剪切内img开始y位置 剪切对象  鼠标移动是否获取值标识
    //剪切窗口按下/开始拖动
    $(document).on({
        mousedown: function(e) {
            _slD = $(".cropper-body-main"); //获取滑块对象
            _sx = parseInt(_slD.css("left")); //获取剪切对象当前的x位置
            _sy = parseInt(_slD.css("top")); //获取剪切对象当前的y位置
            _simgx = parseInt(_slD.find("img").css("left")); //获取剪切对象内img当前的x位置
            _simgy = parseInt(_slD.find("img").css("top")); //获取剪切对象内img当前的y位置
            _MSx = parseInt(e.clientX); //获取鼠标当前的x坐标
            _MSy = parseInt(e.clientY); //获取鼠标当前的y坐标
            _Mflog = true; //鼠标移动获取值标识
            console.log(`剪切对象当前的x位置${_sx}`);
            console.log(`剪切对象当前的y位置${_sy}`);
            console.log(`剪切对象内img当前的x位置${_simgx}`);
            console.log(`剪切对象内img当前的y位置${_simgy}`);
            console.log(`鼠标当前的x坐标${_MSx}`);
            console.log(`鼠标当前的y坐标${_MSy}`);
        },
        touchstart: function(e) {
            _slD = $(".cropper-body-main"); //获取滑块对象
            _sx = parseInt(_slD.css("left")); //获取剪切对象当前的x位置
            _sy = parseInt(_slD.css("top")); //获取剪切对象当前的y位置
            _simgx = parseInt(_slD.find("img").css("left")); //获取剪切对象内img当前的x位置
            _simgy = parseInt(_slD.find("img").css("top")); //获取剪切对象内img当前的y位置
            _MSx = parseInt(e.originalEvent.targetTouches[0].clientX); //获取鼠标当前的x坐标
            _MSy = parseInt(e.originalEvent.targetTouches[0].clientY); //获取鼠标当前的y坐标
            _Mflog = true; //鼠标移动获取值标识
            console.log(`剪切对象当前的x位置${_sx}`);
            console.log(`剪切对象当前的y位置${_sy}`);
            console.log("---------------------------")
            console.log(`剪切对象内img当前的x位置${_simgx}`);
            console.log(`剪切对象内img当前的y位置${_simgy}`);
            console.log("---------------------------")
            console.log(`鼠标当前的x坐标${_MSx}`);
            console.log(`鼠标当前的y坐标${_MSy}`);
        },
    }, ".cropper-body-main-back");

    //剪切窗口拖动
    $(document).on({
        mousemove: function(e) {
            //console.log(_Mflog)
            let _lift = _sx + parseInt(e.clientX) - _MSx;
            let _top = _sy + parseInt(e.clientY) - _MSy;
            let _simgxL = _simgx - (parseInt(e.clientX) - _MSx);
            let _simgxT = _simgy - (parseInt(e.clientY) - _MSy);
            let _imgL = $(".cropper-body-wrap").width() - $("#cropper-body-main-img").width() == 0 ? 0 : ($(".cropper-body-wrap").width() - $("#cropper-body-main-img").width()) / 2; //左边距
            let _imgT = $(".cropper-body-wrap").height() - $("#cropper-body-main-img").height() == 0 ? 0 : ($(".cropper-body-wrap").height() - $("#cropper-body-main-img").height()) / 2; //上边距
            let _imgR = $(".cropper-body-main").width() - ($(".cropper-body-wrap").width() - $("#cropper-body-main-img").width()) / 2 - $("#cropper-body-main-img").width(); //右边距
            let _imgB = $(".cropper-body-main").height() - ($(".cropper-body-wrap").height() - $("#cropper-body-main-img").height()) / 2 - $("#cropper-body-main-img").height(); //下边距
            if (_Mflog) {
                //边界则禁止移动
                if (_lift <= 0) {
                    _lift = 0;
                    _simgxL = _imgL;
                };
                if (_top <= 0) {
                    _top = 0;
                    _simgxT = _imgT;
                };
                if (_lift >= $(".cropper-body-wrap").width() - $(".cropper-body-main").width()) {
                    _lift = $(".cropper-body-wrap").width() - $(".cropper-body-main").width();
                    _simgxL = _imgR;
                };
                if (_top >= $(".cropper-body-wrap").height() - $(".cropper-body-main").height()) {
                    _top = $(".cropper-body-wrap").height() - $(".cropper-body-main").height();
                    _simgxT = _imgB;
                };
                //设置剪切对象的位置
                $(".cropper-body-main").css({
                    left: _lift, //设置剪切对象当前的x位置
                    top: _top, //设置剪切对象当前的y位置
                });
                //设置剪切对象的位置内图片位置
                //console.log(_simgx + parseInt(e.clientX) - _MSx)
                $("#cropper-body-main-img").css({
                    left: _simgxL, //设置剪切对象内img当前的x位置
                    top: _simgxT, //设置剪切对象内img当前的y位置
                });
            };

        },
        touchmove: function(e) {
            //console.log(_Mflog);
            let _lift = _sx + parseInt(e.originalEvent.targetTouches[0].clientX) - _MSx;
            let _top = _sy + parseInt(e.originalEvent.targetTouches[0].clientY) - _MSy;
            let _simgxL = _simgx - (parseInt(e.originalEvent.targetTouches[0].clientX) - _MSx);
            let _simgxT = _simgy - (parseInt(e.originalEvent.targetTouches[0].clientY) - _MSy);
            let _imgL = $(".cropper-body-wrap").width() - $("#cropper-body-main-img").width() == 0 ? 0 : ($(".cropper-body-wrap").width() - $("#cropper-body-main-img").width()) / 2; //左边距
            let _imgT = $(".cropper-body-wrap").height() - $("#cropper-body-main-img").height() == 0 ? 0 : ($(".cropper-body-wrap").height() - $("#cropper-body-main-img").height()) / 2; //上边距
            let _imgR = $(".cropper-body-main").width() - ($(".cropper-body-wrap").width() - $("#cropper-body-main-img").width()) / 2 - $("#cropper-body-main-img").width(); //右边距
            let _imgB = $(".cropper-body-main").height() - ($(".cropper-body-wrap").height() - $("#cropper-body-main-img").height()) / 2 - $("#cropper-body-main-img").height(); //下边距
            if (_Mflog) {
                //边界则禁止移动
                if (_lift <= 0) {
                    _lift = 0;
                    _simgxL = _imgL;
                };
                if (_top <= 0) {
                    _top = 0;
                    _simgxT = _imgT;
                };
                if (_lift >= $(".cropper-body-wrap").width() - $(".cropper-body-main").width()) {
                    _lift = $(".cropper-body-wrap").width() - $(".cropper-body-main").width();
                    _simgxL = _imgR;
                };
                if (_top >= $(".cropper-body-wrap").height() - $(".cropper-body-main").height()) {
                    _top = $(".cropper-body-wrap").height() - $(".cropper-body-main").height();
                    _simgxT = _imgB;
                };
                //设置剪切对象的位置
                $(".cropper-body-main").css({
                    left: _lift, //设置剪切对象当前的x位置
                    top: _top //设置剪切对象当前的y位置
                });
                //设置剪切对象的位置内图片位置
                $("#cropper-body-main-img").css({
                    left: _simgxL, //设置剪切对象内img当前的x位置
                    top: _simgxT //设置剪切对象内img当前的y位置
                });
            };
        }
    })


    let _dw, _dh, _dt, _dl, _dflog = false,
        flagT, flagL,
        _img, _imgTop, _imgleft,
        _cDom, _sDom, _sDoms, _sDoms1, _sDoms2, _sDoms3, _sDoms4, _sDoms5, _sDoms6, _sDoms7, _sDoms8, _sDoms1T, _sDoms2T, _sDoms3T, _sDoms4T, _sDoms5T, _sDoms6T, _sDoms7T, _sDoms8T, _sDoms1L, _sDoms2L, _sDoms3L, _sDoms4L, _sDoms5L, _sDoms6L, _sDoms7L, _sDoms8L; //剪切窗口的width 剪切窗口的height 剪切窗口的top 剪切窗口的left  是否可以拖动标识  剪切窗口对象 当前手柄对象  手柄对象
    //剪切窗口大小手柄按下
    $(document).on({
        mousedown: function(e) {
            e.stopPropagation();
            _sDom = $(this); //获取手柄对象
            _sDoms = $(".cropper-body-main span"); //获取手柄对象集合
            _sDoms1 = _sDoms.eq(0); //左中手柄
            _sDoms2 = _sDoms.eq(1); //左下角手柄
            _sDoms3 = _sDoms.eq(2); //上中手柄
            _sDoms4 = _sDoms.eq(3); //右上角手柄
            _sDoms5 = _sDoms.eq(4); //右中手柄
            _sDoms6 = _sDoms.eq(5); //右下角手柄
            _sDoms7 = _sDoms.eq(6); //下中手柄
            _sDoms8 = _sDoms.eq(7); //左上角手柄
            _cDom = $(".cropper-body-main"); //获取剪切对象
            _dl = parseInt(_cDom.css("left")); //获取剪切对象当前的left
            _dt = parseInt(_cDom.css("top")); //获取剪切对象当前的top
            _dw = parseInt(_cDom.width()); //获取剪切对象宽度
            _dh = parseInt(_cDom.height()); //获取剪切对象的高度
            _MSx = parseInt(e.clientX); //获取鼠标当前的x坐标
            _MSy = parseInt(e.clientY); //获取鼠标当前的y坐标

            _dflog = true; //鼠标移动获取值标识

            //手柄的top
            _sDoms1T = parseInt(_sDoms1.css("top")); //左中手柄top
            _sDoms2T = parseInt(_sDoms2.css("top")); //左下角手柄top
            _sDoms3T = parseInt(_sDoms3.css("top")); //上中手柄top
            _sDoms4T = parseInt(_sDoms4.css("top")); //右上角手柄top
            _sDoms5T = parseInt(_sDoms5.css("top")); //右中手柄top
            _sDoms6T = parseInt(_sDoms6.css("top")); //右下角手柄top
            _sDoms7T = parseInt(_sDoms7.css("top")); //下中手柄top
            _sDoms8T = parseInt(_sDoms8.css("top")); //左上角手柄top
            //手柄的left
            _sDoms1L = parseInt(_sDoms1.css("left")); //左中手柄left
            _sDoms2L = parseInt(_sDoms2.css("left")); //左下角手柄left
            _sDoms3L = parseInt(_sDoms3.css("left")); //上中手柄left
            _sDoms4L = parseInt(_sDoms4.css("left")); //右上角手柄left
            _sDoms5L = parseInt(_sDoms5.css("left")); //右中手柄left
            _sDoms6L = parseInt(_sDoms6.css("left")); //右下角手柄left
            _sDoms7L = parseInt(_sDoms7.css("left")); //下中手柄left
            _sDoms8L = parseInt(_sDoms8.css("left")); //左上角手柄left

            //剪切图对象及参数
            _img = $("#cropper-body-main-img"); //剪切窗口内图对象
            _imgTop = parseInt($("#cropper-body-main-img").css("top")); //剪切窗口内图top
            _imgleft = parseInt($("#cropper-body-main-img").css("left")); //剪切窗口内图left

            flagL = 0; //中间值
            flagT = 0; //中间值

            console.log(`1==${_sDoms1T}---- ${_sDoms1L}`);
            console.log(`2==${_sDoms2T}---- ${_sDoms2L}`);
            console.log(`3==${_sDoms3T}---- ${_sDoms3L}`);
            console.log(`4==${_sDoms4T}---- ${_sDoms4L}`);
            console.log(`5==${_sDoms5T}---- ${_sDoms5L}`);
            console.log(`6==${_sDoms6T}---- ${_sDoms6L}`);
            console.log(`7==${_sDoms7T}---- ${_sDoms7L}`);
            console.log(`8==${_sDoms8T}---- ${_sDoms8L}`);
            console.log(`获取剪切对象当前的left${_dl}`);
            console.log(`获取剪切对象当前的top${_dt}`);
            console.log(`获取剪切对象宽度${_dw}`);
            console.log(`获取剪切对象的高度${_dh}`);
            console.log(`鼠标当前的x坐标${_MSx}`);
            console.log(`鼠标当前的y坐标${_MSy}`);
            console.log(_sDom.index());
        },
        touchstart: function(e) {
            _sDom = $(this); //获取手柄对象
            _sDoms = $(".cropper-body-main span"); //获取手柄对象集合
            _sDoms1 = _sDoms.eq(0); //左中手柄
            _sDoms2 = _sDoms.eq(1); //左下角手柄
            _sDoms3 = _sDoms.eq(2); //上中手柄
            _sDoms4 = _sDoms.eq(3); //右上角手柄
            _sDoms5 = _sDoms.eq(4); //右中手柄
            _sDoms6 = _sDoms.eq(5); //右下角手柄
            _sDoms7 = _sDoms.eq(6); //下中手柄
            _sDoms8 = _sDoms.eq(7); //左上角手柄
            _cDom = $(".cropper-body-main"); //获取剪切对象
            _dl = parseInt(_cDom.css("left")); //获取剪切对象当前的left
            _dt = parseInt(_cDom.css("top")); //获取剪切对象当前的top
            _dw = parseInt(_cDom.width()); //获取剪切对象宽度
            _dh = parseInt(_cDom.height()); //获取剪切对象的高度
            _MSx = parseInt(e.originalEvent.targetTouches[0].clientX); //获取鼠标当前的x坐标
            _MSy = parseInt(e.originalEvent.targetTouches[0].clientY); //获取鼠标当前的y坐标

            _dflog = true; //鼠标移动获取值标识

            //手柄的top
            _sDoms1T = parseInt(_sDoms1.css("top")); //左中手柄top
            _sDoms2T = parseInt(_sDoms2.css("top")); //左下角手柄top
            _sDoms3T = parseInt(_sDoms3.css("top")); //上中手柄top
            _sDoms4T = parseInt(_sDoms4.css("top")); //右上角手柄top
            _sDoms5T = parseInt(_sDoms5.css("top")); //右中手柄top
            _sDoms6T = parseInt(_sDoms6.css("top")); //右下角手柄top
            _sDoms7T = parseInt(_sDoms7.css("top")); //下中手柄top
            _sDoms8T = parseInt(_sDoms8.css("top")); //左上角手柄top
            //手柄的left
            _sDoms1L = parseInt(_sDoms1.css("left")); //左中手柄left
            _sDoms2L = parseInt(_sDoms2.css("left")); //左下角手柄left
            _sDoms3L = parseInt(_sDoms3.css("left")); //上中手柄left
            _sDoms4L = parseInt(_sDoms4.css("left")); //右上角手柄left
            _sDoms5L = parseInt(_sDoms5.css("left")); //右中手柄left
            _sDoms6L = parseInt(_sDoms6.css("left")); //右下角手柄left
            _sDoms7L = parseInt(_sDoms7.css("left")); //下中手柄left
            _sDoms8L = parseInt(_sDoms8.css("left")); //左上角手柄left

            //剪切图对象及参数
            _img = $("#cropper-body-main-img"); //剪切窗口内图对象
            _imgTop = parseInt($("#cropper-body-main-img").css("top")); //剪切窗口内图top
            _imgleft = parseInt($("#cropper-body-main-img").css("left")); //剪切窗口内图left

            flagL = 0; //中间值
            flagT = 0; //中间值
        },
    }, ".cropper-body-main span");


    //左中手柄
    let leftMiddle = (_divW, _left) => {
        if (_divW > _obj.minWidth && _dl + _left >= 0) {
            _cDom.css("width", _dw - _left); //设置剪切窗口高度
            _cDom.css("left", _dl + _left); //设置剪切窗口left
            _img.css("left", _imgleft - _left); //设置剪切内图left
            _sDoms5.css("left", _sDoms5L - _left); //右中手柄的位置
            _sDoms6.css("left", _sDoms6L - _left); //右下角手柄的位置
            _sDoms4.css("left", _sDoms4L - _left); //右上角手柄的位置

            _sDoms3.css("left", _sDoms3L - _left / 2); //上中手柄的位置
            _sDoms7.css("left", _sDoms7L - _left / 2); //下中手柄的位置

            flagL = _left;
        }

        if (_left < flagL && _dl + _left > 0) {
            _cDom.css("width", _dw - _left); //设置剪切窗口高度
            _cDom.css("left", _dl + _left); //设置剪切left
            _img.css("left", _imgleft - _left); //设置剪切内图left
            _sDoms5.css("left", _sDoms5L - _left); //右中手柄的位置
            _sDoms6.css("left", _sDoms6L - _left); //右下角手柄的位置
            _sDoms4.css("left", _sDoms4L - _left); //右上角手柄的位置

            _sDoms3.css("left", _sDoms3L - _left / 2); //上中手柄的位置
            _sDoms7.css("left", _sDoms7L - _left / 2); //下中手柄的位置
        }
    };
    //上中手柄
    let upperMiddle = (_divH, _top) => {
        if (_divH > _obj.minHeight && _dt - _top >= 0) {
            _cDom.css("top", _dt - _top); //设置剪切窗口顶部距离
            _cDom.css("height", _dh + _top); //设置剪切窗口高度
            _img.css("top", _imgTop + _top); //设置剪切内图top

            _sDoms7.css("top", _sDoms7T + _top); //下中手柄的位置

            _sDoms2.css("top", _sDoms2T + _top); //左下角手柄的位置
            _sDoms6.css("top", _sDoms6T + _top); //右下角手柄的位置

            _sDoms1.css("top", _sDoms1T + _top / 2); //左中手柄的位置
            _sDoms5.css("top", _sDoms5T + _top / 2); //右中手柄的位置

            flagT = _top;
        } else if (_top > flagT && _dt - _top > 0) {

            console.log(_dt - _top)
            _cDom.css("top", _dt - _top); //设置剪切窗口顶部距离
            _cDom.css("height", _dh + _top); //设置剪切窗口高度
            _img.css("top", _imgTop + _top); //设置剪切内图top

            _sDoms7.css("top", _sDoms7T + _top); //下中手柄的位置

            _sDoms2.css("top", _sDoms2T + _top); //左下角手柄的位置
            _sDoms6.css("top", _sDoms6T + _top); //右下角手柄的位置

            _sDoms1.css("top", _sDoms1T + _top / 2); //左中手柄的位置
            _sDoms5.css("top", _sDoms5T + _top / 2); //右中手柄的位置
        };

    };
    //下中手柄
    let lowerMiddle = (_divH, _top) => {
        let _divPh = parseInt($(".cropper-body-wrap").height());
        let _divh = parseInt($(".cropper-body-main").height());
        let _divT = parseInt($(".cropper-body-main").css("top"));
        //边界值
        if (_divPh - _divT - _dh < Math.abs(_top)) {
            return
        };

        if (_divH > _obj.minHeight) {
            _cDom.css("height", _dh - _top); //设置剪切窗口高度
            _sDoms7.css("top", _sDoms7T - _top); //下中手柄的位置


            _sDoms2.css("top", _sDoms2T - _top); //左下角手柄的位置
            _sDoms6.css("top", _sDoms6T - _top); //右下角手柄的位置

            _sDoms1.css("top", _sDoms1T - _top / 2); //左中手柄的位置
            _sDoms5.css("top", _sDoms5T - _top / 2); //右中手柄的位置

            flagT = _top;
        }
        if (_top < flagT) {
            _cDom.css("height", _dh - _top); //设置剪切窗口高度
            _sDoms7.css("top", _sDoms7T - _top); //下中手柄的位置


            _sDoms2.css("top", _sDoms2T - _top); //左下角手柄的位置
            _sDoms6.css("top", _sDoms6T - _top); //右下角手柄的位置

            _sDoms1.css("top", _sDoms1T - _top / 2); //左中手柄的位置
            _sDoms5.css("top", _sDoms5T - _top / 2); //右中手柄的位置
        }


    };
    //右中手柄
    let rightMiddle = (_divW, _left) => {
        let _divPw = parseInt($(".cropper-body-wrap").width());
        let _divw = parseInt($(".cropper-body-main").width());
        let _divL = parseInt($(".cropper-body-main").css("left"));

        //边界值
        if (_divPw - _divL - _dw < Math.abs(_left)) {
            return
        };
        if (_divW > _obj.minWidth) {
            _cDom.css("width", _dw + _left); //设置剪切窗口高度
            _sDoms5.css("left", _sDoms5L + _left); //右中手柄的位置
            _sDoms6.css("left", _sDoms6L + _left); //右下角手柄的位置
            _sDoms4.css("left", _sDoms4L + _left); //右上角手柄的位置

            _sDoms3.css("left", _sDoms3L + _left / 2); //上中手柄的位置
            _sDoms7.css("left", _sDoms7L + _left / 2); //下中手柄的位置

            flagL = _left;
        }
        if (_left > flagL) {
            _cDom.css("width", _dw + _left); //设置剪切窗口高度
            _sDoms5.css("left", _sDoms5L + _left); //右中手柄的位置
            _sDoms6.css("left", _sDoms6L + _left); //右下角手柄的位置
            _sDoms4.css("left", _sDoms4L + _left); //右上角手柄的位置

            _sDoms3.css("left", _sDoms3L + _left / 2); //上中手柄的位置
            _sDoms7.css("left", _sDoms7L + _left / 2); //下中手柄的位置
        }

        //边界值

    };
    //剪切窗口大小拖动
    $(document).on({
        mousemove: function(e) {
            //console.log(_Mflog)
            let _left = parseInt(e.clientX) - _MSx; //鼠标左右方向移动的距离
            let _top = _MSy - parseInt(e.clientY); //鼠标上下方向移动的距离
            let _divW = parseInt($(".cropper-body-main").width()); //剪切窗口的宽度
            let _divH = parseInt($(".cropper-body-main").height()); //剪切窗口的高度
            if (_dflog) {
                switch (_sDom.index()) {
                    case 1: //左中手柄
                        leftMiddle(_divW, _left);

                        break;
                    case 2: //左下角手柄
                        //左右移动(左中手柄)
                        leftMiddle(_divW, _left);

                        //上下移动(下中手柄)
                        lowerMiddle(_divH, _top);

                        break;
                    case 3: //上中手柄
                        upperMiddle(_divH, _top);

                        break;
                    case 4: //右上角手柄
                        //上下移动(上中手柄)
                        upperMiddle(_divH, _top);

                        //左右移动(左中手柄)
                        rightMiddle(_divW, _left);

                        break;
                    case 5: //右中手柄
                        rightMiddle(_divW, _left);

                        break;
                    case 6: //右下角手柄
                        //上下移动(左中手柄)
                        rightMiddle(_divW, _left);

                        //左右移动 (下中手柄)
                        lowerMiddle(_divH, _top);

                        break;
                    case 7: //下中手柄
                        lowerMiddle(_divH, _top);

                        break;
                    case 8: //左上角手柄
                        //左右移动 (左中手柄)
                        leftMiddle(_divW, _left);

                        //上下移动 (上中手柄)
                        upperMiddle(_divH, _top);

                        break;
                }
            }
        },
        touchmove: function(e) {
            //console.log(_Mflog);
            let _left = parseInt(e.originalEvent.targetTouches[0].clientX) - _MSx;
            let _top = -parseInt(e.originalEvent.targetTouches[0].clientY) + _MSy;
            let _divW = parseInt($(".cropper-body-main").width()); //剪切窗口的宽度
            let _divH = parseInt($(".cropper-body-main").height()); //剪切窗口的高度
            if (_dflog) {
                console.log(_sDom.index())
                switch (_sDom.index()) {
                    case 1: //左中手柄
                        leftMiddle(_divW, _left);

                        break;
                    case 2: //左下角手柄
                        //左右移动(左中手柄)
                        leftMiddle(_divW, _left);

                        //上下移动(下中手柄)
                        lowerMiddle(_divH, _top);

                        break;
                    case 3: //上中手柄
                        upperMiddle(_divH, _top);

                        break;
                    case 4: //右上角手柄
                        //上下移动(上中手柄)
                        upperMiddle(_divH, _top);

                        //左右移动(左中手柄)
                        rightMiddle(_divW, _left);

                        break;
                    case 5: //右中手柄
                        rightMiddle(_divW, _left);

                        break;
                    case 6: //右下角手柄
                        //上下移动(左中手柄)
                        rightMiddle(_divW, _left);

                        //左右移动 (下中手柄)
                        lowerMiddle(_divH, _top);

                        break;
                    case 7: //下中手柄
                        lowerMiddle(_divH, _top);

                        break;
                    case 8: //左上角手柄
                        //左右移动 (左中手柄)
                        leftMiddle(_divW, _left);

                        //上下移动 (上中手柄)
                        upperMiddle(_divH, _top);

                        break;
                }
            }
        }
    });

    //鼠标抬起/停止拖动
    $(document).on({
        mouseup: function(e) {
            _Mflog = false; //鼠标移动获取值标识
            _dflog = false; //鼠标移动获取值标识
        },
        touchend: function(e) {
            _Mflog = false; //鼠标移动获取值标识
            _dflog = false; //鼠标移动获取值标识
        }
    });


    //剪切
    $("#cropper-footer-right-crop").click(function() {
        $(".cropper-wrap").toggle();

        let _div = $(".cropper-body-main");
        //获取剪切对象的宽度、高度、左边距离、顶部距离
        _obj.cropperHeigth = _div.height();
        _obj.cropperWidth = _div.width();
        _obj.cropperX = parseInt(_div.css("left"));
        _obj.cropperY = parseInt(_div.css("top"));

        console.log(_obj);

        //剪切图的起始位置顶部， 左边， 宽度，高度
        let _x, _y, _w, _h;
        if (_obj.WHscale != 1) {
            _x = _obj.cropperX * _obj.canvasWidth / 600;
            _y = _obj.cropperY * _obj.canvasHeight / 400;
            _w = _obj.cropperWidth * _obj.canvasWidth / 600;
            _h = _obj.cropperHeigth * _obj.canvasHeight / 400;
        } else {
            _x = _obj.cropperX * _obj.canvasWidth / 400;
            _y = _obj.cropperY * _obj.canvasHeight / 400;
            _w = _obj.cropperWidth * _obj.canvasWidth / 400;
            _h = _obj.cropperHeigth * _obj.canvasHeight / 400;
        }

        //被剪切对象
        let _cropperCanvas = document.getElementById('imgAppendCanvas');
        //显示合成（默认160）
        let ctx = _canvas.getContext('2d');
        _canvas.width = 160;
        _canvas.height = 160;

        let ctxScale = _canvasScale.getContext('2d');
        let Scale = 750;
        _canvasScale.width = parseInt(Scale);
        _canvasScale.height = parseInt(Scale);
        let _Scale = Scale / 160; //比例因子


        //生成比例头像（大头像）
        //比例合成
        let _cX, _cy, _cw, _ch; //画布起始的位置左边距离 顶部距离  宽度 高度 
        _cX = _w >= Scale ? 0 : (Scale - _w) / 2;
        _cy = _h >= Scale ? 0 : (Scale - _h) / 2;
        _cw = _w <= Scale ? _w : Scale;
        _ch = _h <= Scale ? _h : Scale;


        let _inputLeft = $.trim($("#headerleft").val()) - 50; //左边的距离
        let _inputTop = $.trim($("#headertop").val()) - 50; //定边的距离

        ctxScale.rect(0, 0, Scale, Scale);
        ctxScale.fillStyle = "#fdfcf8";
        ctxScale.fill();
        ctxScale.arc(160 * _Scale, 160 * _Scale, 120 * _Scale, 0, 2 * Math.PI)
        ctxScale.clip()
        ctxScale.drawImage(_cropperCanvas, _x, _y, _w, _h, _cX + _inputLeft * 7.5, _cy + _inputTop * 7.5, _cw, _ch); //生成头像



        //生成显示头像（小头像）
        ctx.rect(0, 0, 160, 160);
        ctx.fillStyle = "#fdfcf8";
        ctx.fill();
        ctx.arc(160, 160, 120, 0, 2 * Math.PI)
        ctx.clip()
        ctx.drawImage(_cropperCanvas, _x, _y, _w, _h, (_cX) / _Scale + _inputLeft * 1.6, (_cy) / _Scale + _inputTop * 1.6, _cw / _Scale, _ch / _Scale); //生成头像

        _croperObj = _obj;
        _croperObj.x = _x;
        _croperObj.y = _y;
        _croperObj.w = _w;
        _croperObj.h = _h;
        _croperObj.cx = _cX;
        _croperObj.cy = _cy;
        _croperObj.cw = _cw;
        _croperObj.ch = _ch;
        console.log(_croperObj)
    });
})